<template>
  <div class="user-container">
    <div class="avatar-wrapper">
      <img :src="avatarUrl" alt="用户头像" class="avatar">
      <span class="user-name">{{ userName }}</span>
    </div>
    <div class="btn-wrapper">
      <button @click="logout" class="btn">退出登录</button>
      <button @click="changePassword" class="btn">修改密码</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 修改头像地址
const avatarUrl = ref('https://codelover.club/coursefiles/images/film/时尚.jpeg'); 
// 模拟用户名
const userName = ref('张三'); 

// 退出登录方法
const logout = () => {
  // 这里添加退出登录的逻辑，例如清除 token，跳转到登录页等
  console.log('用户已退出登录');
};

// 修改密码方法
const changePassword = () => {
  // 这里添加修改密码的逻辑，例如弹出修改密码的弹窗等
  console.log('用户点击修改密码');
};
</script>

<style scoped>
.user-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-top: 80px; /* 根据导航栏的实际高度调整 */
}

.avatar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar {
  width: 150px; /* 增大头像尺寸 */
  height: 150px;
  border-radius: 50%;
  margin-bottom: 0.5rem;
}

.user-name {
  font-size: 1.2rem;
  font-weight: bold;
}

.btn-wrapper {
  display: flex;
  gap: 1rem;
}

.btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.btn:hover {
  background-color: #0056b3;
}
</style>
<mcfile name="My.vue" path="c:\Users\89462\WebstormProjects\todolist-homework\movie-project\src\views\My.vue"></mcfile>